<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition>
	<p:tab title="Train">
		<h:form>
			<h:panelGrid columns="2">
				<p:outputLabel for="fromLocationTrain" value="From: " />
				<p:selectOneMenu id="fromLocationTrain"
					value="#{trainView.fromInput}" style="width:150px">
					<p:ajax update="toLocationTrain" 
					listener="#{trainView.onFromChange}" />
					<!-- 				<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" /> -->
					<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
					<f:selectItems value="#{trainView.fromList}" />
				</p:selectOneMenu>

				<p:outputLabel for="toLocationTrain" value="To: " />
				<p:selectOneMenu id="toLocationTrain"
					value="#{trainView.toInput}" style="width:150px">
					<p:ajax update="dateTrain" 
					listener="#{trainView.onToChange}" />
					<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
					<f:selectItems value="#{trainView.toList}" />
				</p:selectOneMenu>
				<p:outputLabel for="dateTrain" value="Date:" />
				<p:calendar id="dateTrain" value="#{trainView.date}" />
								
			</h:panelGrid>

			<h:commandButton id="submit" value="Submit">
				<f:ajax event="click" update="trainResults"
					listener="#{trainView.updateTable}" />
			</h:commandButton>


			<h:dataTable id="trainResults" value="#{trainView.resultList}"
				var="list">

				<h:column>
					<f:facet name="FromTrainHeader">From</f:facet>
    				#{list.from}
    			</h:column>

				<h:column>
					<f:facet name="ToTrainHeader">To</f:facet>
    				#{list.to}
    			</h:column>

				<h:column>
					<f:facet name="DateTrainHeader">Date</f:facet>
    				#{list.date}
    			</h:column>

			</h:dataTable>
		</h:form>
	</p:tab>
</ui:composition>
</html>